<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p3_css常用值</title>
  <style>
    h1{
      color: red;
      color: rgb(255,0,0);
      color: rgb(0,255,0);
      color: rgb(0,0,255);
      color: #ff0000;
      color: #0f0;
      color: #00f;
      color: rgba(255,0,0,1);
      color: rgba(255,0,0,0.7);
      color: rgba(255,0,0,.5);
      color: rgba(255,0,0,.3);
      color: rgba(255,0,0,0);
      color: rgba(255,0,0,1);
    }
    /*块级元素默认宽度为父级宽度的100%  高度为0 靠内容撑起来*/
    .d1{
        /*注意:插入背景图必须设置所在区域的大小!*/
        width: 100px;
        height: 150px;
        /*插入背景图*/
        background-image: url("img/mr.png");
        /*调整背景图尺寸:宽度  高度*/
        background-size: 50px 100px;
        /*可以同时设置背景色  没有图的地方显示背景色*/
        background-color: black;
    }
    .d2 {
        width: 500px;
        height: 300px;
        border: solid 5px red;
        background-image: url("img/mr.png");
        background-repeat: no-repeat;
        background-position: 0 0;/*默认位置在左上角*/
        background-position: -50px 0;/*向左*/
        background-position: 0px 50px;/*向下*/
        background-position: -50px -50px;/*向左上*/
        background-position: 50% 50%;/*向左上*/
    }
    .d3 {
        width: 500px;
        height: 500px;
        background-image: linear-gradient(30deg, red,blue,
        green,orange,purple);
    }
  </style>
</head>
<body>
<h1>测试颜色</h1>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
</html>